<template>
	<view class="order-status">
		<!-- 待签约订单 -->
		<view class="order-type-one" v-if="state==1">
			<view class="order-price">
				<text class="sum">
					总价：¥{{info.price}}万，
				</text>
				<text class="pay">
					需付款{{info.price}}万
				</text>
			</view>
			<view class="tips">
				订单签约成功即可与车主联系提车
			</view>
			<view class="btn">
				<view style="margin-right: 20upx;">
					<u-button shape="circle" :plain="true" text="取消" size='small' @tap="isConfirm('cancel')"></u-button>
				</view>
				<view>
					<u-button type="primary" shape="circle" :plain="true" text="签约" size='small' @tap="signClick">
					</u-button>
				</view>
			</view>
		</view>
		<!-- 待提车订单 -->
		<view class="order-type-one" v-else-if="state == 2">
			<view class="order-price">
				<text class="sum">
					总价：¥{{info.price}}万，
				</text>
				<text class="pay">
					已付款¥{{info.price}}万
				</text>
			</view>
			<!-- <view class="tips">
				预约提车时间:2022年10月20日
			</view> -->
			<view class="btn">
				<view style="margin-right: 20upx;">
					<u-button shape="circle" :plain="true" text="联系车主" size='small' @tap="isConfirm('contact')">
					</u-button>
				</view>
				<view>
					<u-button type="primary" shape="circle" :plain="true" text="完成" size='small' @tap="isConfirm('complete')">
					</u-button>
				</view>
			</view>
		</view>
		<!-- 已完成订单 -->
		<view class="order-type-one" v-else-if="state == 3">
			<view class="order-price">
				<text class="sum">
					总价：¥{{info.price}}万，
				</text>
				<text class="pay">
					已付款¥{{info.price}}万
				</text>
			</view>
		</view>
		<!--交易取消  -->
		<view class="order-type-one" v-else-if="state == 4">
			<view class="btn" style="margin-top: 10upx;">
				<view style="margin-right: 20upx;">
					<u-button shape="circle" :plain="true" text="删除订单" size='small' @tap="isConfirm('delete')">
					</u-button>
				</view>
				<view>
					<u-button type="primary" shape="circle" :plain="true" text="重新下单" size='small' @tap="toOrderList">
					</u-button>
				</view>
			</view>
		</view>
		<u-action-sheet :actions="actionList" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消"
			:safeAreaInsetBottom="true" :show="showContact" @close="()=>showContact=false" @select="selectContact">
		</u-action-sheet>
		<u-modal :show="showCompleteModel" title="订单完成" content='你确定该订单已经完成,并且你已经提车完成' :showCancelButton="true"
			:closeOnClickOverlay="true" @close="()=>showCompleteModel=false" @cancel="()=>showCompleteModel=false"
			@confirm="comfirmEvent('complete')">
		</u-modal>
		<u-modal :show="showDeleteOrderModel" title='你确定删除该订单吗？' :showCancelButton="true" :closeOnClickOverlay="true"
			@close="()=>showDeleteOrderModel=false" @cancel="()=>showDeleteOrderModel=false" @confirm="comfirmEvent('delete')">
		</u-modal>
		<u-modal :show="isShowCancelOrder" title="取消订单" content='你确定取消订单吗？' :closeOnClickOverlay="true"
			:showCancelButton="true" @confirm="comfirmEvent('cancel')" @cancel="isShowCancelOrder=false"
			@close="isShowCancelOrder=false" width="400rpx">
		</u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default () {
					return {}
				}
			},
			state: {
				type: Number,
				default: 0
			},
			order_id: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				//订单完成按钮模态框
				showCompleteModel: false,
				//操作菜单
				showContact: false,
				//删除订单模态框
				showDeleteOrderModel: false,
				//取消订单
				isShowCancelOrder: false,

				actionList: [{
					name: '联系车主',
					phone: '10086'
				}, ],

			};
		},
		methods: {
			//是否打开确认模态框
			isConfirm(type) {
				if (type === 'cancel') {
					this.isShowCancelOrder = true;
				} else if (type === 'contact') {
					this.showContact = true;
				} else if (type === 'delete') {
					this.showDeleteOrderModel = true;
				}else if(type === 'complete'){
					this.showCompleteModel = true;
				}
			},
			//点击确认取消
			comfirmEvent(type){
				if (type === 'cancel') {
					// 确认取消订单
					this.isShowCancelOrder = false;
					this.$emit('closeOrder', this.order_id)
				} else if (type === 'contact') {
					this.showContact = true;
				} else if (type === 'delete') {
					this.showDeleteOrderModel = false;
					this.$emit('deleteOrder',this.order_id)
				}else if(type==='complete'){
					this.showCompleteModel = false;
					this.$emit('completeOrder',this.order_id)
					
				}
			},
			//签约订单
			signClick() {
				uni.navigateTo({
					url: `../../../pages/profile/orderList/signContract/signContract?order_id=${this.order_id}&price=${this.info.price}`
				})
			},
			//联系车主
			contact() {},
			selectContact(e) {
				console.log(e);
			},
			confirmOrder() {
				this.showCompleteModel = false
				uni.showToast({
					icon: 'none',
					title: '订单完成'
				})
			},
			//重新下单
			toOrderList() {
				uni.showToast({
					icon: 'none',
					title: '重新下单成功！'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-status {
		.order-price {
			display: flex;
			justify-content: flex-end;
			font-size: 27upx;
			padding-bottom: 20upx;

			.sum {
				color: #999;
			}
		}

		.tips {
			height: 50upx;
			line-height: 50upx;
			color: #ff4122;
			font-size: 22upx;
		}

		.btn {
			display: flex;
			justify-content: flex-end;

			.u-button {
				width: 160upx;
			}
		}
	}
</style>
